<template>
  <div>
    <el-form-item label="起始日期">
      <el-date-picker value-format="YYYY-MM-DD" v-model="start" />
    </el-form-item>
    <el-form-item label="结束日期">
      <el-date-picker value-format="YYYY-MM-DD" v-model="end" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="UpdateData">查询</el-button>
    </el-form-item>
    <el-table :data="form.entrys" style="width: 100%">
      <el-table-column label="入职人员名称" prop="name" />
      <el-table-column label="员工性别" prop="sex" />
      <el-table-column label="入职日期" prop="entry_date" />
      <el-table-column label="入职部门" prop="department" />
      <el-table-column label="入职岗位" prop="position" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { getDataset } from "@/api/crud"
import { EntryItem } from "@/models/statement"
import { ref, reactive } from "vue"

const start = ref("")
const end = ref("")

function UpdateData() {
  getDataset<EntryItem>(`statement/entry?start=${start.value}&end=${end.value}`).then((res: any) => {
    form.entrys = res.data
  })
}
const form = reactive({
  entrys: ref<EntryItem[]>([])
})
</script>
